<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
	</head>
	<body>
		<!-- 1.定义VUE根标签 -->
		<div id="app" align="center">
			<h1>用户新增</h1>
			<div>
				用户名：<input type="text" v-model="addUser.name"/>
				年龄：	<input type="text" v-model="addUser.age"/>
				性别：	<input type="text" v-model="addUser.sex"/>
				<!-- 方法中是否需要携带参数？依据：判断是否有数据来源 -->
				<button @click="addUserBtn">新增</button>
			</div>
			<hr />
			<!-- 1.修改时ID不允许修改 2.数据需要回显 -->
			<h1>用户修改</h1>
			<div>
				ID编号：<input type="text" v-model="updateUser.id" disabled="disabled"/>
				用户名：<input type="text" v-model="updateUser.name"/>
				年龄：	<input type="text" v-model="updateUser.age"/>
				性别：	<input type="text" v-model="updateUser.sex"/>
				<!-- 方法中是否需要携带参数？依据：判断是否有数据来源 -->
				<button @click="updateBtn">修改</button>
			</div>
			
			
			
			<!-- 准备一个表格，展现user的数据 -->
			<table id="tab1" border="1px" width="80%" align="center">
				<tr align="center" height="60px">
					<th colspan="5">
						<h1 style="color: blue">用户列表</h1>
					</th>
				</tr>
				<tr align="center" height="60px">
					<th>编号</th>
					<th>名称</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				
				<!-- 4.遍历数据实现表格数据获取 -->
				<tr align="center" v-for="user in userList">
					<th v-text="user.id"></th>
					<th v-text="user.name"></th>
					<th v-text="user.age"></th>
					<th v-text="user.sex"></th>
					<td>
						<button @click="toUpdate(user)">修改</button>
						<button @click="deleteUserById(user.id)">删除</button>
					</td>
				</tr>
				
			</table>
		</div>
		<!-- 导入2个JS函数库：vue/axios -->
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		
		<script>
			/*  */
			axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el:'#app',
				data: {
					userList:[],
					//定义用户新增对象
					addUser:{
						name:'',
						age:'',
						sex:''
					},
					updateUser:{
						id:'',
						name:'',
						age:'',
						sex:''
					}
					
				},
				methods:{
					//2.定义获取远程数据的ajax请求
					//简化前
					/* getUserList(){
						axios.get("/findAll")
							.then(result => {
								//服务器返回的是JSON串，经过JS程序解析变为JS对象
								//3.实现数据赋值
								this.userList = result.data
								
							})	
					}, */
					//简化后
					async getUserList(){
						let {data:result} = await axios.get("/findAll")
							this.userList = result
							
					},
					
					//简化前
					/* deleteUserBuId(id){
						//常规写法
						//axios.delete("http://localhost:8090/user/"+id)
						//模板字符串写法(反引号),"$"表示动态获取值
						axios.delete(`/user/${id}`)
							.then(result => {
								console.log(result.data)
								//如何刷新页面？
								this.getUserList()//刷新页面
								
								
							})
					} */
					//简化后
					async deleteUserById(id){	
						let {data:result} = await axios.delete(`/user/${id}`)
							console.log(result)
							this.getUserList()
					},
					async addUserBtn(){
						let {data:result} = await axios.post("/saveUser",this.addUser)
							console.log(result)
							//如果新增成功，刷新页面
							this.getUserList()
							//新增成功之后，清空新增信息
							this.addUser = {}
					},
					toUpdate(user){
						//点击修改按钮时，应该将数据传递给updateUser
						this.updateUser = user
					},
					
					async updateBtn(){
						//更新：put  this.updateUser是一个js对象，接收是json串
						let {data: result} = await axios.put("/updateUser",this.updateUser)
							console.log(result)
						
							this.getUserList()
							this.updateUser = {}
						
					}
					
					
					
				},
				//页面渲染前调用使用created方法，
				//页面渲染后调用使用mounted方法
				created(){
					
					//1.触发函数调用
					this.getUserList()
				}
				
				
			})
		</script>
		
		
		
		
		
		
		
		
		
	</body>
</html>
